﻿@page "/radiobuttonlist"
@page "/docs/guides/components/radiobuttonlist.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    RadioButtonList
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>RadioButtonList</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase radio button groups with two-way data binding, configurable orientation and layout (vertical/horizontal with alignment options), data-bound items, statically declared items, null value support, programmatically populated items with disabled states.
</RadzenText>

<RadzenText  Anchor="radiobuttonlist#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of RadioButtonList
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>RadioButtonList</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="RadioButtonList" Example="RadioButtonListBindValue">
    <RadioButtonListBindValue />
</RadzenExample>

<RadzenText  Anchor="radiobuttonlist#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of RadioButtonList using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="RadioButtonList" Example="RadioButtonListChangeEvent">
    <RadioButtonListChangeEvent />
</RadzenExample>

<RadzenText Anchor="radiobuttonlist#orientation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Set RadioButtonList orientation and layout
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    RadioButtonList layout can be configured via various properties for position and alignment such as <code>Orientation</code>, <code>AlignItems</code>, and <code>JustifyContent</code>. The behavior is similar to <RadzenLink Text="RadzenStack" Path="/stack" />.
</RadzenText>
<RadzenExample ComponentName="RadioButtonList" Example="RadioButtonListOrientation">
    <RadioButtonListOrientation />
</RadzenExample>

<RadzenText Anchor="radiobuttonlist#populate-items" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Populate RadioButtonList items from data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Data</code> property to dynamically populate RadioButtonList items from a collection.
</RadzenText>
<RadzenExample ComponentName="RadioButtonList" Example="RadioButtonListItemsFromData">
    <RadioButtonListItemsFromData />
</RadzenExample>

<RadzenText Anchor="radiobuttonlist#populate-items-statically" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Statically declared and populated RadioButtonList items from data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Combine statically declared items with data-bound items for flexible RadioButtonList configurations.
</RadzenText>
<RadzenExample ComponentName="RadioButtonList" Example="RadioButtonListDeclaredAndItemsFromData">
    <RadioButtonListDeclaredAndItemsFromData />
</RadzenExample>

<RadzenText Anchor="radiobuttonlist#null-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    RadioButtonList with null value
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    RadioButtonList supports nullable value types, allowing no selection when the value is null.
</RadzenText>
<RadzenExample ComponentName="RadioButtonList" Example="RadioButtonListNullValue">
    <RadioButtonListNullValue />
</RadzenExample>

<RadzenText Anchor="radiobuttonlist#populate-items-programmatically" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Populate items programmatically and disable item
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use loops to programmatically create RadioButtonList items and set individual items as disabled.
</RadzenText>
<RadzenExample ComponentName="RadioButtonList" Example="RadioButtonListForEach">
    <RadioButtonListForEach />
</RadzenExample>

<RadzenText Anchor="radiobuttonlist#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor RadioButtonList component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a RadioButtonList item." },
        new KeyboardShortcut { Key = "Shift + Tab", Action = "Navigate to a previous RadioButtonList item." },
        new KeyboardShortcut { Key = "Space or Enter", Action = "Select a focused RadioButtonList item." }
    };
}
